<template>
  <div class="layout-wrapper">
    <!-- 背景层 - 最底层 -->
    <ParticleBackground />

    <!-- 主要布局内容 -->
    <div class="layout-grid" :class="{ 'sidebar-collapsed': appStore.collapsed }">
      <!-- 侧边栏 -->
      <div class="layout-sidebar">
        <n-layout has-sider style="height: 100%;">
          <n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="240"
            :collapsed="appStore.collapsed" show-trigger @collapse="appStore.toggleCollapsed"
            @expand="appStore.toggleCollapsed" class="layout-sider">
            <div class="logo">
              <div class="logo-icon">
                <svg t="1751042067723" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                  <path
                    d="M513.172967 914.032423h5.767257l14.496081 31.797853 17.379709-14.418144 2.883629-66.479337 37.565111 20.263339a374.092397 374.092397 0 0 0 75.208159-112.773271 593.170256 593.170256 0 0 0 20.263339-138.803866l28.914224-17.379709c5.767258-14.418144 5.767258-20.263338-5.767257-20.263339-20.263338 11.612451-60.712079 31.797854-77.935916 43.33237v43.332369l-14.418145 2.883629-8.650886 28.914225-31.797854-14.418145-43.332369 69.440901h-5.767258l-14.418145-37.565111-14.418144 37.565111h-5.767258l-43.410305-69.440901-31.797854 14.418145-5.845194-23.380775-20.185402-5.767258v-43.332369c-17.301773-11.612451-57.82845-31.797854-77.935916-43.332369-11.612451 0-14.418144 5.767258-2.883629 20.263338l28.914225 17.379709a654.661694 654.661694 0 0 0 20.263338 138.803866 302.781034 302.781034 0 0 0 75.208159 112.773271l37.565112-20.263338 2.883629 66.479336 17.379709 14.418144 14.49608-31.797853h5.767258z m0-688.252074a449.846107 449.846107 0 0 1 92.587868 115.656899c0 54.944821 40.44874 130.15298 112.695334 92.587868 34.759419-23.380775 23.380775-75.208159 0-107.006013-17.301773-20.263338-31.797854-31.797854-49.099627-31.797853V17.613517c2.883629-23.380775 14.49608-23.380775 23.380775 0 11.534516 37.565112 20.263338 83.78111 34.681483 130.075044a457.172083 457.172083 0 0 0 89.626303 138.881802c89.626303 77.935916 193.748687 216.817718 193.748687 271.840475v167.796027a316.575691 316.575691 0 0 0-101.316691 86.742675 1165.687495 1165.687495 0 0 0-60.712078 121.502093h-17.379709a166.081437 166.081437 0 0 1 0-109.967578c20.263338-49.099627 31.797854-109.889642 0-138.803866-20.263338-14.418144-60.712079 0-106.928077 89.626303-43.410305 89.626303-155.871832 231.313799-211.128396 248.693508-52.061192-17.379709-161.950833-155.871832-211.128397-248.693508-43.332369-89.626303-83.859046-101.316691-106.928077-89.626303-31.797854 28.914225-20.263338 89.626303 0 138.803866 11.534516 14.49608 11.534516 52.061192 0 109.967578h-20.263338a466.290585 466.290585 0 0 0-60.712078-121.502093 315.952203 315.952203 0 0 0-101.316691-86.742675V558.410838c0-54.944821 104.122384-193.748687 193.748687-271.840475a454.522262 454.522262 0 0 0 89.626303-138.881802c14.49608-49.099627 23.380775-92.509932 34.681483-130.075044 11.612451-23.380775 20.263338-23.380775 23.380775 0v277.607733c-17.301773 0-31.797854 11.612451-49.099627 31.797853-23.380775 31.797854-34.759419 83.859046 0 107.006013 72.246594 37.565112 112.77327-37.565112 112.77327-92.587868a584.51937 584.51937 0 0 1 95.081818-115.578964z m-54.944821 399.031889a87.366162 87.366162 0 0 0-37.565112-69.440901l-60.712078-34.681482a118.852272 118.852272 0 0 0 28.992161 60.712078c11.45658 23.224903 34.603547 31.953726 69.285029 43.488241z m40.526676 72.32453l-17.379709-31.797853-14.49608 5.767257a38.967958 38.967958 0 0 0 14.49608 17.37971c2.883629 0 8.728823 5.845194 17.379709 8.728822z m31.797854 0c5.767258-2.883629 14.418144-2.883629 17.301773-5.845193 5.845194-5.767258 14.49608-14.418144 14.496081-17.301774l-14.496081-11.612451z m37.565111-72.32453a168.263643 168.263643 0 0 0 69.362966-37.565111 119.319887 119.319887 0 0 0 28.914224-60.712079 656.999772 656.999772 0 0 0-60.712078 34.759419 68.661542 68.661542 0 0 0-37.487176 63.595707z"
                    fill="url(#logoGradient)" p-id="9739"></path>
                  <defs>
                    <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
                    </linearGradient>
                  </defs>
                </svg>
              </div>
              <span v-show="!appStore.collapsed" class="logo-text">聚龙科技</span>
            </div>

            <n-menu :collapsed="appStore.collapsed" :collapsed-width="64" :collapsed-icon-size="22"
              :options="menuOptions" :value="currentRoute" @update:value="handleMenuSelect" class="sidebar-menu" />
          </n-layout-sider>
        </n-layout>
      </div>

      <!-- 固定头部 -->
      <div class="layout-header">
        <n-layout-header bordered class="header">
          <div class="header-left">
            <n-button quaternary circle @click="appStore.toggleCollapsed" class="collapse-btn">
              <template #icon>
                <n-icon>
                  <MenuOutline />
                </n-icon>
              </template>
            </n-button>

            <!-- 面包屑导航 -->
            <n-breadcrumb class="breadcrumb">
              <n-breadcrumb-item>首页</n-breadcrumb-item>
              <n-breadcrumb-item>{{ getCurrentPageName() }}</n-breadcrumb-item>
            </n-breadcrumb>
          </div>

          <div class="header-right">
            <!-- 搜索 -->
            <!-- <n-button
              quaternary
              circle
              class="header-action-btn"
            >
              <template #icon>
                <n-icon><SearchOutline /></n-icon>
              </template>
            </n-button> -->

            <!-- 全屏切换 -->
            <n-button quaternary circle @click="toggleFullscreen" class="header-action-btn">
              <template #icon>
                <n-icon>
                  <ExpandOutline v-if="!isFullscreen" />
                  <ContractOutline v-else />
                </n-icon>
              </template>
            </n-button>

            <!-- 主题切换 -->
            <!-- <n-button
              quaternary
              circle
              @click="handleThemeToggle"
              class="header-action-btn theme-toggle-btn"
              data-theme-toggle
            >
              <template #icon>
                <n-icon>
                  <SunnyOutline v-if="themeStore.isDark" />
                  <MoonOutline v-else />
                </n-icon>
              </template>
            </n-button> -->

            <!-- Token状态显示 -->
            <TokenStatus />

            <!-- 用户头像 -->
            <n-dropdown :options="userOptions" @select="handleUserMenuSelect">
              <n-button quaternary circle class="user-avatar-btn">
                <div class="user-avatar">
                  <img src="http://118.178.124.108:9000/budys/15.png" :alt="authStore.userInfo?.username || 'Admin'"
                    class="avatar-img" />
                </div>
              </n-button>
            </n-dropdown>
          </div>
        </n-layout-header>
      </div>

      <!-- 可滚动内容区 -->
      <div class="layout-content">
        <div class="content-scroll-area">
          <ErrorBoundary>
            <router-view v-slot="{ Component }">
              <transition name="page-fade" mode="out-in" @before-leave="onBeforeLeave" @enter="onEnter"
                @leave="onLeave">
                <keep-alive :include="cachedViews">
                  <component :is="Component" :key="route.path" v-if="Component" class="page-component" />
                </keep-alive>
              </transition>
            </router-view>
          </ErrorBoundary>
        </div>
      </div>

      <!-- 固定底部 -->
      <div class="layout-footer">
        <n-layout-footer class="footer">
          <a href="http://king.dragons.org.cn"> DRAGONS </a>
          <span> © 2024 | </span>
          <a href="https://beian.miit.gov.cn/"> 沪ICP备2024089484号 </a>
        </n-layout-footer>
      </div>
    </div>

    <!-- 浮层组件 - 顶层 -->
    <WelcomeToast ref="welcomeToastRef" />
    <DevTools />
    <ErrorBoundary />
  </div>
</template>

<script setup lang="ts">
import { computed, h, ref, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useMessage } from 'naive-ui'
import { NIcon } from 'naive-ui'
import {
  HomeOutline,
  DocumentTextOutline,
  CubeOutline,
  PeopleOutline,
  SettingsOutline,
  MenuOutline,
  SunnyOutline,
  MoonOutline,
  PersonOutline,
  LogOutOutline,
  ImageOutline,
  SearchOutline,
  ExpandOutline,
  ContractOutline
} from '@vicons/ionicons5'
import { useAppStore, useThemeStore, useAuthStore } from '@/store'

// 动态导入组件以避免TypeScript错误
const ParticleBackground = defineAsyncComponent(() => import('@/components/ParticleBackground.vue'))
const WelcomeToast = defineAsyncComponent(() => import('@/components/WelcomeToast.vue'))
const DevTools = defineAsyncComponent(() => import('@/components/DevTools.vue'))
const ErrorBoundary = defineAsyncComponent(() => import('@/components/ErrorBoundary.vue'))
const TokenStatus = defineAsyncComponent(() => import('@/components/TokenStatus.vue'))

const router = useRouter()
const route = useRoute()
const message = useMessage()
const appStore = useAppStore()
const themeStore = useThemeStore()
const authStore = useAuthStore()
const welcomeToastRef = ref()
const isFullscreen = ref(false)

// 缓存视图列表
const cachedViews = ref<string[]>(['Dashboard', 'OrderManagement', 'ProductManagement', 'UserManagement'])

const currentRoute = computed(() => route.name as string)

const renderIcon = (icon: any) => {
  return () => h(NIcon, null, { default: () => h(icon) })
}

// 页面切换动画处理
const onBeforeLeave = (el: Element) => {
  console.log('Page before leave:', route.name)
}

const onEnter = (el: Element) => {
  console.log('Page enter:', route.name)
  el.classList.add('page-enter-active')
}

const onLeave = (el: Element) => {
  console.log('Page leave:', route.name)
  el.classList.add('page-leave-active')
}

// 组件错误处理
const handleComponentError = (error: Error) => {
  console.error('Component error:', error)
  message.error('页面加载失败，请刷新重试')
}

const menuOptions = [
  {
    label: '首页',
    key: 'Dashboard',
    icon: renderIcon(HomeOutline)
  },
  {
    label: '订单管理',
    key: 'OrderManagement',
    icon: renderIcon(DocumentTextOutline)
  },
  {
    label: '商品管理',
    key: 'ProductManagement',
    icon: renderIcon(CubeOutline)
  },
  {
    label: '用户管理',
    key: 'UserManagement',
    icon: renderIcon(PeopleOutline)
  },
  {
    label: '图片管理',
    key: 'ImageManagement',
    icon: renderIcon(ImageOutline)
  },
  // {
  //   label: '系统管理',
  //   key: 'SystemManagement',
  //   icon: renderIcon(SettingsOutline)
  // }
]

const userOptions = [
  {
    label: '个人中心',
    key: 'profile',
    icon: renderIcon(PersonOutline)
  },
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(LogOutOutline)
  }
]

const getCurrentPageName = () => {
  const routeMap: Record<string, string> = {
    'Dashboard': '仪表盘',
    'OrderManagement': '订单管理',
    'ProductManagement': '商品管理',
    'UserManagement': '用户管理',
    'ImageManagement': '图片管理',
    'SystemManagement': '系统管理',
    'Profile': '个人中心'
  }
  return routeMap[currentRoute.value] || '未知页面'
}

const handleMenuSelect = async (key: string) => {
  console.log('=== 开始导航 ===')
  console.log('Menu selected:', key)
  console.log('Current route name:', route.name)
  console.log('Current route path:', route.path)
  console.log('Target route:', key)

  // 检查路由是否存在
  const routes = router.getRoutes()
  const targetRoute = routes.find((r: any) => r.name === key)
  if (!targetRoute) {
    console.error('Target route not found:', key)
    message.error(`路由 ${key} 不存在`)
    return
  }
  console.log('Target route found:', targetRoute.path)

  try {
    console.log('Attempting navigation...')
    const result = await router.push({ name: key })
    console.log('Navigation result:', result)
    console.log('New route name:', route.name)
    console.log('New route path:', route.path)
    console.log('=== 导航完成 ===')
  } catch (error: any) {
    console.error('=== 导航失败 ===')
    console.error('Navigation error:', error)
    message.error(`导航失败: ${error.message || error}`)
  }
}

const handleUserMenuSelect = (key: string) => {
  console.log('User menu selected:', key)

  if (key === 'logout') {
    authStore.logout()
    message.success('退出登录成功！')
    router.push('/login')
  } else if (key === 'profile') {
    // 修复：使用路由名称进行跳转
    router.push({ name: 'Profile' }).then(() => {
      console.log('Navigation to Profile successful')
    }).catch((error: any) => {
      console.error('Navigation to Profile failed:', error)
      message.error(`跳转到个人中心失败: ${error.message || error}`)
    })
  }
}

// 全屏切换功能
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}

// 监听全屏状态变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
}

// 创建涟漪主题切换动画
const createRippleTransition = () => {
  console.log('Creating ripple transition...')

  // 先尝试使用 View Transitions API
  if ('startViewTransition' in document) {
    try {
      console.log('Using View Transitions API')
      const transition = (document as any).startViewTransition(() => {
        themeStore.toggleTheme()
      })

      transition.ready.then(() => {
        const x = window.innerWidth - 80
        const y = 80
        const maxRadius = Math.hypot(
          Math.max(x, window.innerWidth - x),
          Math.max(y, window.innerHeight - y)
        )

        document.documentElement.animate(
          {
            clipPath: [
              `circle(0px at ${x}px ${y}px)`,
              `circle(${maxRadius}px at ${x}px ${y}px)`,
            ],
          },
          {
            duration: 800,
            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
            pseudoElement: '::view-transition-new(root)',
          }
        )
      }).catch(() => {
        console.log('View Transitions API failed, using Canvas fallback')
        // 如果View Transitions API失败，使用Canvas备用方案
        createCanvasRipple()
      })
      return
    } catch (error) {
      console.warn('View Transitions API failed:', error)
    }
  }

  console.log('Using Canvas ripple fallback')
  // 备用方案：使用Canvas创建涟漪效果
  createCanvasRipple()
}

// Canvas涟漪效果备用方案
const createCanvasRipple = () => {
  console.log('Creating Canvas ripple effect...')

  // 创建Canvas遮罩层
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  if (!ctx) {
    console.error('Failed to get canvas context')
    return
  }

  // 设置Canvas样式和尺寸
  canvas.style.position = 'fixed'
  canvas.style.top = '0'
  canvas.style.left = '0'
  canvas.style.width = '100vw'
  canvas.style.height = '100vh'
  canvas.style.pointerEvents = 'none'
  canvas.style.zIndex = '9999'
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  // 涟漪起始位置（主题按钮位置）
  const startX = window.innerWidth - 80
  const startY = 80
  const maxRadius = Math.hypot(
    Math.max(startX, window.innerWidth - startX),
    Math.max(startY, window.innerHeight - startY)
  )

  document.body.appendChild(canvas)

  // 动画参数
  let currentRadius = 0
  const duration = 800 // 0.8秒
  const startTime = performance.now()

  // 获取当前主题色
  const isDark = themeStore.isDark
  const rippleColor = isDark ? '#0f172a' : '#ffffff'

  console.log('Ripple animation started, color:', rippleColor)

  const animate = (currentTime: number) => {
    const elapsed = currentTime - startTime
    const progress = Math.min(elapsed / duration, 1)

    // 使用缓动函数
    const easeProgress = 1 - Math.pow(1 - progress, 3)
    currentRadius = maxRadius * easeProgress

    // 清空Canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 绘制涟漪圆形
    ctx.fillStyle = rippleColor
    ctx.beginPath()
    ctx.arc(startX, startY, currentRadius, 0, Math.PI * 2)
    ctx.fill()

    if (progress < 1) {
      requestAnimationFrame(animate)
    } else {
      // 动画完成，移除Canvas
      console.log('Ripple animation completed')
      document.body.removeChild(canvas)
    }
  }

  requestAnimationFrame(animate)
}

// 主题切换处理 - 集成涟漪效果
const handleThemeToggle = () => {
  console.log('🔄 Theme toggle clicked')
  console.log('🔄 Current theme state before toggle:', themeStore.isDark)

  // 先切换主题
  themeStore.toggleTheme()

  console.log('🔄 Theme state after toggle:', themeStore.isDark)
  console.log('🔄 HTML classList after toggle:', document.documentElement.classList.toString())

  // 然后创建涟漪效果
  createRippleTransition()
}

// 测试路由跳转的函数
const testNavigation = async (routeName: string) => {
  console.log(`🧪 Testing navigation to ${routeName}`)
  try {
    await router.push({ name: routeName })
    console.log(`✅ Test navigation to ${routeName} successful`)
  } catch (error) {
    console.error(`❌ Test navigation to ${routeName} failed:`, error)
  }
}

// 暴露给全局用于调试
if (typeof window !== 'undefined') {
  (window as any).testNavigation = testNavigation;
  (window as any).debugRouter = {
    currentRoute: () => route,
    router: router,
    routes: () => router.getRoutes(),
    push: (name: string) => router.push({ name }),
    authStore: authStore
  }
}

onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullscreenChange)

  // 检查是否需要显示欢迎弹窗
  checkAndShowWelcomeToast()

  // 输出调试信息
  console.log('🚀 Layout mounted')
  console.log('Current route:', route.name, route.path)
  console.log('Available routes:', router.getRoutes().map(r => ({ name: r.name, path: r.path })))
  console.log('Auth token exists:', !!authStore.token)
})

// 检查并显示欢迎弹窗
const checkAndShowWelcomeToast = () => {
  // 检查是否已经显示过欢迎弹窗
  const hasShownWelcome = localStorage.getItem('hasShownWelcome')

  // 如果有token且没有显示过欢迎弹窗，则显示
  if (authStore.token && !hasShownWelcome) {
    console.log('🎉 Showing welcome toast for first time login')
    setTimeout(() => {
      if (welcomeToastRef.value) {
        welcomeToastRef.value.show()
        // 标记为已显示
        localStorage.setItem('hasShownWelcome', 'true')
      }
    }, 1000)
  }
}

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
})
</script>

<style scoped>
.layout-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-color-secondary);
}

.layout-grid {
  display: grid;
  grid-template-areas:
    "sidebar header"
    "sidebar content"
    "sidebar footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 60px;
  height: 100vh;
  position: relative;
  z-index: 1;
}

/* 侧边栏折叠时的布局调整 */
.layout-grid.sidebar-collapsed {
  grid-template-columns: 64px 1fr;
}

.layout-sidebar {
  grid-area: sidebar;
  background: var(--bg-color-primary);
  border-right: 1px solid var(--border-color-primary);
  overflow: hidden;
}

.layout-sider {
  height: 100%;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-color-primary);
  background: var(--bg-color-primary);
  position: relative;
  overflow: hidden;
}

.logo-icon {
  margin-right: 12px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color-primary);
  white-space: nowrap;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sidebar-menu {
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.layout-header {
  grid-area: header;
  background: var(--bg-color-primary);
  border-bottom: 1px solid var(--border-color-primary);
  position: relative;
  z-index: 999;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  background: var(--bg-color-primary);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
  border: none;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.collapse-btn {
  margin-right: 8px;
}

.breadcrumb {
  margin-left: 8px;
}

.header-action-btn {
  width: 40px;
  height: 40px;
}

.theme-toggle-btn {
  position: relative;
}

.user-avatar-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.layout-content {
  grid-area: content;
  background: var(--bg-color-secondary);
  overflow: hidden;
  position: relative;
}

.content-scroll-area {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
}

.layout-footer {
  grid-area: footer;
  background: var(--bg-color-primary);
  border-top: 1px solid var(--border-color-primary);
}

.footer {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color-primary);
  font-size: 14px;
  color: var(--text-color-secondary);
  border: none;
}

.footer a {
  color: var(--text-color-secondary);
  text-decoration: none;
  margin: 0 4px;
}

.footer a:hover {
  color: var(--primary-color);
}

/* 页面切换动画 - 只应用于内容区域 */
.page-fade-enter-active,
.page-fade-leave-active {
  transition: all 0.3s ease-in-out;
}

.page-fade-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.page-fade-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.page-component {
  height: 100%;
}

.page-enter-active {
  animation: pageEnter 0.3s ease-out;
}

.page-leave-active {
  animation: pageLeave 0.3s ease-in;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pageLeave {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .layout-grid {
    grid-template-areas:
      "header"
      "content"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 64px 1fr 60px;
  }

  .layout-sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    height: calc(100vh - 64px);
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .layout-sidebar.show {
    transform: translateX(0);
  }

  .header {
    padding: 0 16px;
  }

  .header-left {
    gap: 8px;
  }

  .breadcrumb {
    display: none;
  }

  .content-scroll-area {
    padding: 16px;
  }
}

/* 深色主题适配 */
html.dark .header {
  background: rgba(30, 30, 30, 0.8);
}

html.dark .logo-text {
  background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.dark .footer {
  background: var(--bg-color-primary);
  color: var(--text-color-secondary);
}
</style>

<style>
/* View Transitions API 样式 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2147483646;
}

html.dark::view-transition-old(root) {
  z-index: 2147483646;
}

html.dark::view-transition-new(root) {
  z-index: 1;
}

html {
  view-transition-name: root;
}
</style>